<template>
	<ui-sys :title="videoInfo.title">
		<ui-fixed bg="bg-mask-20">
			<view class="flex-center" id="myVideo">
				<video class="video" :src="videoInfo.videoUrl" controls></video>
			</view>

			<ui-tab v-show="selectIndex!=3" :tab="['介绍','评论','题目']" align="flex-center" style="height: 70rpx;"
				tpl="trapezoid" @change="tabChange">
			</ui-tab>
		</ui-fixed>
		
			<scroll-view :scroll-y="true" style="max-height: 85vh;">
				<view class="constant " v-show="selectIndex!=3">
					<view v-show="selectIndex==0" class="video-info text-black">
						<view class="info-card p-3">
							<ui-title :title="videoInfo.title" depth="2" isIcon></ui-title>
							<view class="ui-tag class-link  mp-5 bg-red-light" v-if="videoInfo.simpleClassVO!=null"
								@tap="handleArea(videoInfo.simpleClassVO)">
								{{" #"+videoInfo.simpleClassVO.name+"# "}}
							</view>

							<view class="desc text-10 pt-2">{{videoInfo.des}}
							</view>
							<view class="tags pt-4">
								<view class="ui-tag ui-BG-Main" v-for="item in videoInfo.tags" :key="item.id">
									{{item.name}}
								</view>
							</view>
							<view class=" text-grey  text-sm pt-2"> {{videoInfo.uploadTime}}</view>
						</view>

					</view>
					<view v-show="selectIndex==1" class="pl-3 pr-3 comment text-black">
						<h-commentList :list="commentList" @clickComment="clickComment" @clickUser="clickUser"
							@clickChildrenComment="clickChildrenComment"></h-commentList>
					</view>
					<view v-show="selectIndex==2">
						<view class="itemCard" v-for="item in publishList.data" :key="item._id" @tap="toQuestion(item)">
							<view class="itemBody">
								<!-- 可能有图片 -->
								<view class="images" v-if="item._id%2==0">
									<image v-if="item._id%5==0"
										src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
										mode="scaleToFill"></image>
									<image v-if="item._id%3==0"
										src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
										mode="scaleToFill"></image>
									<image
										src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
										mode="scaleToFill"></image>
								</view>
								<view class="main">
									<view class="mainTitle">{{ item.title }}</view>
									<view class="mainContent">{{ item.content }}</view>
									<!-- 时间 -->
									<view class="mainCreateTime">
										<view class="cicon-time-o"></view>
										<text>{{
						              item.createDate
						            }}</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<!-- 评论详情 -->
				<uni-transition mode-class="slide-bottom" :show="selectIndex==3">
					<view class="commonInfo comment">
						<header class="p-3  text-16 text-grey borders-bottom">
							<view class="title">评论详情</view>
							<text class="cicon-close" @click="closeCommonInfo()"></text>
						</header>
						<h-commentInfoList :list="replyInfoList" :commentInfo="replyHeader" @clickComment="clickComment"
							@clickUser="clickUser" @clickChildrenComment="clickChildrenComment"></h-commentInfoList>
					</view>
				</uni-transition>

			</scroll-view>
			<view class="bottom-textarea" v-show="selectIndex==3||selectIndex==1" :style="{bottom: inputBottom+'px'}">
				<view class="textarea-container">
					<textarea v-model="recordInput" :style="{height: textareaHeight+'px'}"
						:placeholder="replyTo!=null?`回复@${replyTo.fromUid.nickName}`:'发一条友善的评论'" :auto-height="false"
						:show-confirm-bar="false" :cursor-spacing="10" :fixed="true" :adjust-position="false"
						@focus="focusTextarea" @blur="blurTextarea" />
					<button v-show="!isTextareaFocus" class="ui-btn bg-blue-gradient sm" @tap="sendCommond">发送</button>
				</view>

				<view class="pt-4 textarea-tips" v-show="isTextareaFocus" @tap="hiddenKeyboard">
					<view>{{recordInput.length+"字"}}</view>
					<view>收起</view>
				</view>
			</view>

		 


	</ui-sys>
</template>

<script>
	import {
		timestampFormatCommon
	} from "../../utils/utils.js"
	import {
		getStorageUserInfo
	} from '@/utils/storageUtils.js'

	import {
		getVideoInfoRequest
	} from "@/api/video.js"
	import {
		getCommontListRequest,
		getReplyListRequest,
		passCommontRequest,
		passReplyRequest
	} from "@/api/commont.js"
	export default {

		data() {
			return {
				videoId: '',
				selectIndex: 0,

				videoInfo: '',

				// 发布题目
				publishList: {
					data: [{
							_id: 1,
							areaName: 'Java',
							title: 'JVM 原理',
							content: `1.首先分析两个概念 JVM实例和JVM执行引擎实例
2.JVM实例对应了一个独立运行的java程序,它是进程级别。
3.JVM执行引擎实例则对应了属于用户运行程序的线程,它是线程级别的。
4.JVM的生命周期
5.JVM实例的诞生:当启动一个Java程序时,一个JVM实例就产生了`,
							createDate: '2022-08-09 19:20'
						},
						{
							_id: 2,
							areaName: 'Java',
							title: 'jdk8新特性有哪些',
							content: '1.Lambda表达式 \n' +
								'2.新的日期API \n' +
								'3.引入Optional \n' +
								'4.使用Base64',
							createDate: '2022-08-09 19:22'
						},
						{
							_id: 3,
							areaName: 'Java',
							title: 'uniapp介绍',
							content: 'uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台',
							createDate: '2022-08-19 22:20'
						},
						{
							_id: 4,
							areaName: 'Java',
							title: 'JVM 原理',
							content: '12345',
							createDate: '2022-08-09 22:22'
						},
						{
							_id: 5,
							areaName: 'Java',
							title: 'JVM 原理',
							content: '12345',
							createDate: '2022-08-09 22:21'
						},
						{
							_id: 6,
							areaName: 'Java',
							title: 'JVM 原理',
							content: '12345',
							createDate: '2022-08-09 22:23'
						}

					]
				},

				// 评论列表
				commentList: [],
				replyInfoList: [],
				replyHeader: {},
				replyTo: null,
				// 输入框相关
				isTextareaFocus: false,
				isInputFocus: false,
				recordInput: "",
				inputBottom: 0,
				textareaHeight: 20,

				//发送类型
				sendType: 'commont',
				isLogin: false,
				userInfo: null,



			};
		},
		onLoad: function(params) { //option为object类型，会序列化上个页面传递的参数
			this.videoId = params.videoID;
			this.getVideoInfo()

			this.checkLogin()


		},
		methods: {
			// 检查登陆状态
			checkLogin() {
				this.userInfo = getStorageUserInfo()
				if (this.userInfo != null) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			},
			// 获取是新详情
			getVideoInfo() {
				this.$Loading();
				setTimeout(() => {
					this.$HideLoading();
				}, 10000);
				const params = {
					'vId': this.videoId
				}
				getVideoInfoRequest(params).then(res => {
					this.videoInfo = res.data
					this.$HideLoading();
				})
			},

			getCommontList() {
				this.$Loading();
				setTimeout(() => {
					this.$HideLoading();
				}, 10000);
				const params = {
					"page": {
						"pageNum": 1,
						"pageSize": 50
					},
					"param": {
						"topicId": this.videoId
					}
				}
				getCommontListRequest(params).then(res => {
					this.commentList = res.data
					this.$HideLoading();
				})
			},
			tabChange(data) {
				this.selectIndex = data.index
				if (data.index == 1) {
					this.getCommontList()
				}
			},
			timestampFormat(time) {
				return timestampFormatCommon(time)
			},
			// 跳转到 题目列表页面
			handleArea(areaInfo) {
				uni.navigateTo({
					url: `/pages/question/list?areaID=${areaInfo.id}&areaName=${encodeURIComponent(areaInfo.name)}`
				})

			},
			// 跳转到 题目详情页
			toQuestion(item) {
				uni.navigateTo({
					url: `/pages/question/detail?id=${item._id}`,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			// 点击评论事件
			clickComment(common) {
				this.replyTo = common
				this.sendType = 'reply'
			},
			// 点击头像/用户名称事件
			clickUser(e) {
				console.log(e );
				uni.navigateTo({
					url: `/pages/my/info?userID=${e.uid}`,
				});
			},
			// 点击子评论 事件
			clickChildrenComment(commont) {

				this.replyTo = commont
				this.sendType = 'reply'
				this.$Loading();
				setTimeout(() => {
					this.$HideLoading();
				}, 10000);
				this.selectIndex = 3
				this.replyHeader = commont
				this.getReplyList(commont.id)

			},

			getReplyList(id) {
				const params = {
					"page": {
						"pageNum": 1,
						"pageSize": 50
					},
					"param": {
						"commentId": id
					}
				}
				getReplyListRequest(params).then(res => {
					this.replyInfoList = res.data
					this.$HideLoading();

				})
			},


			closeCommonInfo() {
				this.selectIndex = 1
				this.replyTo = null
				this.sendType = 'commont'
			},
			focusTextarea(e) {
				this.isTextareaFocus = true
				this.textareaHeight = 200
				this.inputBottom = e.detail.height - 50;
			},
			blurTextarea(e) {
				this.isTextareaFocus = false
				this.textareaHeight = 20
				this.inputBottom = 0;
			},
			sendCommond() {
				if (!this.isLogin) {
					// 去登陆
					// 需要登陆 跳转登陆页面
					this.$Tips('请先登陆');
					uni.redirectTo({
						url: '/pages/login/login'
					});
					return
				}
				if (this.recordInput.length <= 0 || this.recordInput == '') {
					return
				}
				//评论
				if (this.sendType == 'commont') {

					const params = {
						"content": this.recordInput,
						"fromUid": this.userInfo.uid,
						"topicId": this.videoId,
						"topicType": "VIDEO"
					}
					passCommontRequest(params).then(res => {
						 this.recordInput=''
						this.getCommontList()
					})

				} //回复
				else if (this.sendType == 'reply') {

					 
					 

					// 回复的评论
					if (this.replyTo.commentId == null) {
						console.log('回复的评论')
						 
						const params = {
							"commentId": this.replyTo.id,
							"content": this.recordInput,
							"fromUid": this.userInfo.uid,
							"replyId": this.replyTo.id,
							"replyType": "VIDEO",
							"toUid": this.replyTo.fromUid.uid
						}
						passReplyRequest(params).then(res => {
							this.recordInput=''
							this.getCommontList()
							this.getReplyList(this.replyHeader.id)
						})
					} else {
						// 回复的回复
						 
						const params = {
							"commentId": this.replyTo.commentId,
							"content": this.recordInput,
							"fromUid": this.userInfo.uid,
							"replyId": this.replyTo.id,
							"replyType": "VIDEO",
							"toUid": this.replyTo.fromUid.uid
						}
						passReplyRequest(params).then(res => {
							
							this.recordInput=''
							this.getCommontList()
							this.getReplyList(this.replyHeader.id)
						})
					}


				}



			},
			// 收起键盘
			hiddenKeyboard() {
				if (this.selectIndex == 1 && (this.recordInput.length <= 0 || this.recordInput == '')) {
					this.replyTo = null
					this.sendType = 'commont'
				}
			},



		}
	}
</script>

<style lang="scss">
	@import "../../utils/common.scss";

	#myVideo {
		width: 100%;

	}

	.video {
		width: 100%;
	}

	.constant {
		margin-top: 500rpx;

		.video-info {

			padding-top: 30rpx;

			.info-card {
				box-shadow: 0px 3px 2px 0px rgba(97, 108, 150, 0.2);

                 margin-bottom: 20px;


				.title {}
			}

		}

	}


	.comment {
		padding-bottom: 50px;
	}

	.commonInfo {
		margin-top: 440rpx;
		padding-top: 20rpx;

		header {
			display: flex;
			justify-content: space-between;
		}



	}

	.itemCard {
		width: 90%;
		padding: 30rpx;
		box-shadow: 0px 3px 10px 0px rgba(97, 108, 150, 0.2);
		border-radius: 8px;
		margin: 0 auto;
		margin-bottom: 20rpx;

		&:not(:first-child) {
			border-top: 2rpx solid #f1f3fc;
		}

		.itemCardTop {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.headPicture {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				border: 2px solid #fff;
			}

			.nickname {
				font-size: 28rpx;
				margin-left: 16rpx;
			}
		}

		.itemBody {
			.images {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 230rpx;
					height: 216rpx;
					border-radius: 15rpx;

					&:not(:first-child) {
						margin-left: 22rpx;
					}
				}
			}

			.main {
				width: 100%;
				margin-top: 20rpx;
				font-size: 28rpx;

				.mainTitle {
					@include text-ellipsis(2);
				}

				.mainContent {
					color: #666666;
					font-size: 26rpx;
					margin-top: 20rpx;
					word-wrap: break-word;
					@include text-ellipsis(3);
				}

				.mainCreateTime {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #666666;
					margin-top: 20rpx;
					font-size: 25rpx;

					view {
						font-size: 30rpx;
						color: #666666;
					}

					text {
						margin-left: 10rpx;
					}
				}
			}
		}
	}



	.bottom-textarea {
		z-index: 999;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #f2f2f2;
		border-top: 2rpx solid rgba(226, 226, 226, 1);
		padding: 6px 20px;
		// display: flex;
		// align-items: flex-end;
		padding-bottom: 25px;

		.textarea-tips {
			display: flex;
			justify-content: space-between;
		}


		.textarea-container {
			flex: 1;

			min-height: 80rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 8rpx;
			box-sizing: border-box;
			padding: 20rpx 16rpx;

			>textarea {
				height: 20px;
				max-height: 200rpx;
				font-size: 36rpx;
				color: rgba(8, 8, 8, 1);
				width: auto;
			}

			>button {
				position: absolute;
				right: 25px;
				top: 10px;
			}
		}

		>button {
			flex-shrink: 0;
			height: 80rpx;
			margin: 0;
			margin-left: 16rpx;
		}
	}
</style>
